<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="header">
                    <h1>
                        <a href="#">
                            <img src="./assets/og_Ms_logo.png" alt="logo" height="100%">
                        </a>
                    </h1>
                    <div class="input-group" id="input-group1">
                        <span class="input-group-addon" id="sizing-addon1">
                            <i class="glyphicon glyphicon-search"></i>
                        </span>
                        <input type="text" class="form-control" id="search" placeholder="search">
                    </div>
                </div>
                <!-- // 导航条 -->
                <nav class="navbar navbar-inverse" id="navbar">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                                aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>
                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav nav-tabs nav-justified">
                                <li class="active">
                                    <a href="#">Home
                                        <span class="sr-only">(current)</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">About Us</a>
                                </li>
                                <li>
                                    <a href="#">Portfolio</a>
                                </li>
                                <li>
                                    <a href="#">Solutions</a>
                                </li>
                                <li>
                                    <a href="#">Case Stodies</a>
                                </li>
                                <li>
                                    <a href="#">Get a Quote</a>
                                </li>
                                <li class="dropdown">
                                </li>
                        </div>
                        <!-- /.navbar-collapse -->
                    </div>
                    <!-- /.container-fluid -->
                </nav>
                <!-- 轮播图 -->
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="./assets/ogMs_banner.jpg" alt="...">
                            <div class="carousel-caption">
                                图片1
                            </div>
                        </div>
                        <div class="item">
                            <img src="./assets/ogMs_banner.jpg" alt="...">
                            <div class="carousel-caption">
                                图片2
                            </div>
                        </div>
                        <div class="item">
                            <img src="./assets/ogMs_banner.jpg" alt="...">
                            <div class="carousel-caption">
                                图片3
                            </div>
                        </div>
                        <div class="item">
                            <img src="./assets/ogMs_banner.jpg" alt="...">
                            <div class="carousel-caption">
                                图片4
                            </div>
                        </div>
                        ...
                    </div>

                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <!-- 内容 -->
                <div class="row" id="content">
                    <div class="col-md-4">
                        <h4> Welcome to the Orange Monster
                            <br>
                            <small>Cras etestac orci convallis lacinia ut vitae</small>
                        </h4>
                        <p class="">
                            Class aptent tacit sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus feugiat, lacus sed adipiscing
                            venenatis,
                            <a href="#">est odio pharetra mi</a>, eu molestie orci uma id lacus. Pellentesque sollicitudin pulvinar est
                            quis aliquam.
                        </p>
                        <p>
                            Cras ac tellus justo, et tincidunt nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
                            egestas.
                            <a href="#">Morbi porta vulputate</a> lorem, quis dignissim eros feugiat sit amet! Donec suscipit portitor
                            leo vel iaculis.
                        </p>
                        <p>
                            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus feugiat, lacus sed
                            adipiscing venenatis, est odio pharetra mi, eu molestie orci uma idlacus. Pellentesque sollicitudin
                            pulvinar est quis aliquam.
                        </p>
                        <a class="btn btn-primary" href="#">Click Me</a>
                    </div>
                    <div class="col-md-4" id="center">
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1" id="img">
                                <img src="./assets/ogMs_feat1.png" alt="">
                                <img src="./assets/ogMs_feat2.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 ">
                        <h4 class="text-warning">Pellentesque habitant morbi</h4>
                        <p>tristique senectus et netus et malesuada fames ac turpis egestas. Duis arcu enim, ultrices nec mollis
                            commodo,
                            <a href="#">lobortis quis neque.</a> Duis consequat diam eu ipsum volutpat pulvinar. Quisque venenatis laoreet
                            ligula vel ultices.</p>
                        <p>
                            Aliquam quis eros elit, eget facilisis elit. Quisque sodales, nunc sed sodales blandit, metus justo gravida eros, at facilisis
                            <a href="#">lorem mi ac augue.</a> Nullam sed turpis orci, at dapibus metus. Suspendisse sed venenatis ipsum.
                            Aliquam erat volutpat.
                        </p>
                        <h4 class="text-warning">onec ornare volutpat molestie.</h4>
                        <p>
                            Etiam tortor umna, ultricies id ultrices id; faucibus sit amet uma. Maunis accumsan, risus sit amet rhoncus euismod, velit
                            enim
                            <a href="#">ullamcorper odio</a>, feugiat semper erat sapien sit amet justo. Fusce euismod dictum pretum.
                            Sed venenatis felis eu ante feugiat pretium?
                        </p>
                        <p>
                            Aliquam quis eros elit, eget facilisis elit. Quisque sodales, nunc sed sodales blandit, metus justo gravida eros, at facilisis
                            lorem mi ac augue.
                        </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-10 col-md-offset-1">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row left">
                                <ul class="col-md-3 col-sm-5">
                                    <h4>AboutUs</h4>
                                    <li>
                                        <a href="#">duiveleros vestibulum</a>
                                    </li>
                                    <li>
                                        <a href="#">Mauis lectus erat, iaculis</a>
                                    </li>
                                </ul>
                                <ul class="col-md-3 col-sm-5">
                                    <h4>Porttolio</h4>
                                    <li>
                                        <a href="#">dui vel eros vestibulum</a>
                                    </li>
                                    <li>
                                        <a href="#">Mauris lectus ratiacuis</a>
                                    </li>
                                    <li>
                                        <a href="#">Mauis lectus erat. iculis</a>
                                    </li>
                                </ul>
                                <ul class="col-md-3 col-sm-5">
                                    <h4>Solutions</h4>
                                    <li>
                                        <a href="#">dui vel eros vestibulum</a>
                                    </li>
                                    <li>
                                        <a href="#">Mauris lectus erat, iaculis</a>
                                    </li>
                                    <li>
                                        <a href="#">Mauris lectus erat, iaculis</a>
                                    </li>
                                </ul>
                                <ul class="col-md-3 col-sm-5">
                                    <h4>Case Studies</h4>
                                    <li>
                                        <a href="#">dui vel eros vestibulum</a>
                                    </li>
                                    <li>
                                        <a href="#">Mauis lectus erat iaculis</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4 right">
                            <p>
                                <a href="#">@OrangeMonster</a> Praesent non odio vitae sapien congue feugiataid elit? In hac habitasse
                                platea dictumst.
                                <br>
                                <em>11 minutes ago</em>
                                <br>
                                <a href="#">FollowUs on Twitter</a>
                            </p>
                            <img src="./assets/ogMs_eye.png" alt="推特">
                        </div>
                    </div>
                    <address>
                        Copyright2011 &copy; orangemonster.com.au, Orange Monster DevelopmentPty Ltd All Rights Reserve
                    </address>
                    <ul class="list-inline">
                        <li>
                            <a href="#">ContactUs</a>
                        </li>
                        <li>|</li>
                        <li>
                            <a href="#">Privacy Policy</a>
                        </li>
                        <li>|</li>
                        <li>
                            <a href="#">Get a Quote</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="./js/jquery.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="./js/bootstrap.js"></script>
</body>

</html>